<template>
  <div>
    <header>
      <div class="navbox">
        <el-row class="menuTop">
          <el-col :span="12" class="logoImg"><img src="../../../static/images/logo.png"></el-col>
          <el-col :span="12"><img class="menuButton" src="../../../static/images/navButton.png" @click="btn"></el-col>
        </el-row>
        <div class="slideNav" @click="close">
          <el-row class="menuList" v-bind:class="{ 'leftSlide': leftSlider }">
            <el-col :span="24" class="logo"><img src="../../../static/images/headportrait.png"></el-col>
            <el-col :span="24" v-for="item in items" :key="item.id" class="navList">
              <router-link :to="{name:(item.name),params:{pageName:(item.description)}}">{{item.description}}</router-link>
            </el-col>
          </el-row>
        </div>
      </div>
      <div @click="close" v-bind:class="{ 'mask': mask }"></div>
    </header>
  </div>
</template>
<script>
export default {
  data () {
    return {
      leftSlider: false,
      mask: false,
      items: [
        { name: 'Home', description: 'Home' },
        { name: 'Products', description: 'Products' },
        { name: 'SolutionDifferent', description: 'Solution' },
        { name: 'AsiaCases', description: 'Cases' },
        { name: 'news', description: 'News' },
        { name: 'Service', description: 'Service' },
        { name: 'About', description: 'About us' },
        { name: 'Contact', description: 'Contact us' }
      ]
    }
  },
  mounted () {
  },
  methods: {
    btn: function () {
      this.leftSlider = true
      this.mask = true
    },
    close: function () {
      this.mask = false
      this.leftSlider = false
    }
  }
}
</script>
<style lang="sass">
header
  width: 100%
  position: fixed
  top: 0
  left: 0
  z-index: 20000
.logoImg
  padding-top: 0.2rem
</style>
